<template>
<view class="box"  :class="url ? move?'is-img':'':''">
    <uni-icons
    @click="uploadImg"
    style="margin: 0 9.462rpx;"
        type="image"
        size="26"
    />
    <view class="Input-box">
        <input  type="text" @blur="lowseblur" class="Input" :focus="focus"  v-model="inputData" :placeholder="placeholder?'回复@'+placeholder:'请输入评论'">
        <view v-if="url" class="img" :style="`--url:url(${url})`">
            <uni-icons
            @click ="deleteImg"
        style="position: absolute;right: -12rpx;top:-12rpx;background-color: red;border-radius: 50%;"
        type="closeempty"
        color="#fff"
        size="15"
    /></view>
    </view>
    <view class="btn" hover-class="btn-hover" @click="sendMsg">发送</view>
</view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
const Prpo = defineProps<{
    focus:boolean,
    move:boolean,
    placeholder:string
}>()
const lowseblur = (event)=>{
console.log(event.detail);
emit('get-focus')
}
const emit = defineEmits(['get-msg','get-focus'])
const inputData = ref('')
const sendMsg = ()=>{
if(inputData.value == "" && !url.value )return
emit('get-msg',{comment:inputData.value,url:url.value})

inputData.value=''
url.value = false
}
const url = ref(false)
const uploadImg = ()=>{
    uni.chooseImage({
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: ({ tempFilePaths, tempFiles }) => {
            uni.uploadFile({
        url: 'https://www.damer.asia/api/admin/image/',
        fileType: 'image',
        filePath: tempFilePaths[0],
        name: 'file',
        success: ({ data, statusCode }) => {
            data=JSON.parse(data)
            if(data.code == 200 ){
                url.value = 'https://www.damer.asia/'+data.url
            }
        },
        fail: (error) => {}
    })
        },
        fail: (error) => {}
    })
  
}
const privewImg=(url)=>{
    uni.previewImage({
        url:url,
        urls:[url]
    })
   }
const deleteImg=()=>{
    url.value = false
}
</script>
<style lang="scss" scoped>
.box{
    
    position: sticky;
    width: 100%;
    bottom: 0;
    display: flex;
    align-items: center;
    
    padding: 13rpx 0;
    background-color: #fff;
    .Input-box{
        flex-grow: 1;
        padding: 5.769rpx 8rpx;
        background-color: rgba(51,51,51,.07);
        border-radius: 14.231rpx;
        .Input{
        padding: 5.769rpx 0rpx;
    }
    .img{
        position: relative;
        --url:url();
        width: 100rpx;
        height: 100rpx;
        margin:  10rpx 0 15rpx;
        border-radius: 10rpx;
        background-image: var(--url);
        background-position: center;
        background-size: cover;
    }
    }

    .btn{
        width: 132rpx;
        height: 50rpx;
        margin: 0 13rpx;
        border-radius: 28.846rpx;
        color: #fff;
        font-size: 30rpx;
        line-height: 50rpx;
        letter-spacing: .2em;
        background-color: #24edc2;
        text-align: center;
        animation: .2s;
    }
    .btn-hover{
        background-color: aquamarine;

    }
}
.is-img{
    
    transform: translateY(-120rpx);
}

</style>